<!--组件属性栏配置-->
<template>
  <div class="config" id="rightConfig">
    <a-tabs
      :activeKey="attributeActiveKey.activeTabKey"
      type="card"
      @change="changeTabs"
    >
      <a-tab-pane key="mapAttribute" tab="属性">
        <a-form :labelCol="{ span: 7 }" :wrapperCol="{ span: 14 }">
          <a-form-item label="地址">
            <a-input
              v-model:value="formData.address"
              placeholder="请选择模型地址"
              disabled
              class="inputStyle"
            >
              <template
                #suffix
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a-tooltip
                  @click="showSelectMapLocation(true)"
                  class="resetLocationIcon"
                  title="选择模型地址"
                >
                  <environment-outlined />
                </a-tooltip>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="样式">
            <a-select
              class="inputStyle"
              v-model:value="aMapData.mapStyle"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            >
              <a-select-option
                v-for="mapStyleItem in mapStyles"
                :key="mapStyleItem.value"
                :value="mapStyleItem.value"
              >
                {{ mapStyleItem.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item v-if="formData.longitude" label="经度">
            <a-input
              v-model:value="formData.longitude"
              disabled
              class="inputStyle"
              placeholder="请选择经度"
            />
          </a-form-item>
          <a-form-item v-if="formData.latitude" label="纬度">
            <a-input
              v-model:value="formData.latitude"
              disabled
              class="inputStyle"
              placeholder="请选择纬度"
            />
          </a-form-item> -->
          <a-collapse
            v-model:activeKey="attributeActiveKey.adderssKey"
            expand-icon-position="right"
          >
            <a-collapse-panel key="componentAttribute" header="组件属性设置">
              <template v-if="formData.selectMapComponent.sourceData">
                <a-form-item label="名称">
                  <a-input
                    class="inputStyle"
                    v-model:value="
                      formData.selectMapComponent.sourceData.features[0]
                        .properties.name
                    "
                    :placeholder="
                      formData.selectMapComponent.sourceData.features[0]
                        .properties.name
                    "
                  />
                </a-form-item>
                <a-form-item
                  label="x坐标点"
                  v-if="formData.selectMapComponent.type != 'polygonComponents'"
                >
                  <a-input-number
                    class="inputStyle"
                    keyboard
                    :step="1"
                    v-model:value="formData.selectMapComponent.x"
                    @change="changePixel(formData.selectMapComponent, 0)"
                  />
                </a-form-item>
                <a-form-item
                  label="y坐标点"
                  v-if="formData.selectMapComponent.type != 'polygonComponents'"
                >
                  <a-input-number
                    :step="1"
                    class="inputStyle"
                    v-model:value="formData.selectMapComponent.y"
                    @change="changePixel(formData.selectMapComponent, 1)"
                  />
                </a-form-item>

                <a-form-item label="状态">
                  <a-radio-group
                    v-model:value="formData.selectMapComponent.visible"
                  >
                    <a-radio :value="true">显示</a-radio>
                    <a-radio :value="false">隐藏</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="层级">
                  <a-input-number
                    :min="1"
                    class="inputStyle"
                    v-model:value="formData.selectMapComponent.zIndex"
                  />
                </a-form-item>
                <a-form-item label="透明度">
                  <a-input-number
                    :min="0.1"
                    :max="1"
                    class="inputStyle"
                    v-model:value="formData.selectMapComponent.opacity"
                    :step="0.1"
                  />
                </a-form-item>
                <!--不同map component组件属性-->
                <component
                  :is="formData.selectMapComponent.type + 'Attribute'"
                  :selectMapComponent="formData.selectMapComponent"
                >
                  <!-- mark层 -->
                  <a-form-item
                    label="文字标注"
                    v-if="
                      formData.selectMapComponent.type != 'polygonComponents'
                    "
                  >
                    <a-radio-group
                      v-model:value="formData.selectMapComponent.isShowMark"
                      @change="
                        changeMarkModal(formData.selectMapComponent, $event)
                      "
                    >
                      <a-radio :value="true">打开</a-radio>
                      <a-radio :value="false">关闭</a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <template v-if="formData.selectMapComponent.isShowMark">
                    <template
                      v-for="markItem in zMarkerLayerComponents"
                      :key="markItem"
                    >
                      <z-marker-layer-components-attribute
                        v-if="
                          markItem.componentsId ==
                          formData.selectMapComponent.componentsId
                        "
                        :zMarkLayerComponentsAttr="markItem"
                      />
                    </template>
                  </template>
                </component>
              </template>
              <template v-else>
                <a-empty description="暂无组件信息，点击选中组件~" />
              </template>
            </a-collapse-panel>
          </a-collapse>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="viewControl" tab="动画">
        <!--镜头动画属性-->
        <a-form :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
          <local-animations :viewControlConfig="viewControlConfig" />
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="mapTools" tab="控件">
        <div class="content">
          <a-form :labelCol="{ span: 7 }" :wrapperCol="{ span: 14 }">
            <a-form-item
              v-for="toolsItem in aMapData.tools"
              :key="toolsItem.name"
              :label="toolsItem.text"
            >
              <a-radio-group v-model:value="toolsItem.visible">
                <a-radio :value="true">开</a-radio>
                <a-radio :value="false">关</a-radio>
              </a-radio-group>
              <!-- <a-switch v-model:checked="toolsItem.visible" /> -->
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="mapData" tab="数据">组件数据</a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import {
  MinusOutlined,
  PlusOutlined,
  EnvironmentOutlined,
  InfoOutlined,
} from '@ant-design/icons-vue';
import scatterLayerComponentsAttribute from '@/components/mapComponents/mapAttribute/scatterLayerComponentsAttribute.vue';
import pulseLineLayoutComponentsAttribute from '@/components/mapComponents/mapAttribute/pulseLineLayoutComponentsAttribute.vue';
import ZMarkerLayerComponentsAttribute from './mapAttribute/zMarkerLayerComponentsAttribute.vue';
import polygonComponentsAttribute from './mapAttribute/polygonComponentsAttribute.vue';
import localAnimations from '@/components/mapComponents/localAnimation/localAnimations.vue';
import { pixelSwapToLanLat } from '@/util';
export default {
  emits: ['showSelectMapLocation'],
  props: [
    'aMapData',
    'formData',
    'zMarkerLayerComponents',
    'viewControlConfig',
  ],
  inject: ['getMap', 'getScreenStatus'],
  components: {
    EnvironmentOutlined,
    InfoOutlined,
    scatterLayerComponentsAttribute,
    pulseLineLayoutComponentsAttribute,
    MinusOutlined,
    PlusOutlined,
    ZMarkerLayerComponentsAttribute,
    polygonComponentsAttribute,
    localAnimations,
  },
  data() {
    return {
      mapStyles: [
        { value: 'amap://styles/normal', label: '标准' },
        {
          value: 'amap://styles/9c798d685f08c78de10a8dc2c1483155',
          label: '导航蓝',
        },

        {
          value: 'amap://styles/dark',
          label: '幻影黑',
        },
        {
          value: 'amap://styles/light',
          label: '月光银',
        },
        {
          value: 'amap://styles/whitesmoek',
          label: '远山黛',
        },
        {
          value: 'amap://styles/fresh',
          label: '草青色',
        },
        {
          value: 'amap://styles/graffiti',
          label: '涂鸦',
        },
        { value: 'amap://styles/macaron', label: '马卡龙' },
        { value: 'amap://styles/blue', label: '锭青蓝' },
        {
          value: 'amap://styles/darkblue',
          label: '极夜蓝',
        },
        { value: 'amap://styles/wine', label: '酱籽' },
      ],
      attributeActiveKey: {
        // activeTabKey: 'mapAttribute',
        activeTabKey: 'viewControl',
        adderssKey: 'componentAttribute',
      },
    };
  },
  computed: {
    map() {
      return this.getMap();
    },
    isFullscreen() {
      return this.getScreenStatus();
    },
  },
  methods: {
    changeMarkModal(component, e) {
      const status = e.target.value;
      let filterComponent = this.zMarkerLayerComponents.filter((item) => {
        return item.componentsId == component.componentsId;
      });
      if (status && filterComponent.length == 0) {
        //创建mark层
        let size, coordinates;
        if (component.type == 'scatterLayerComponents') {
          size = component.layerStyle.size;
          coordinates = component.sourceData.features[0].geometry.coordinates;
        } else {
          //轨迹线层
          size = [
            component.layerStyle.lineWidth * 10,
            component.layerStyle.lineWidth * 10,
          ];
          coordinates =
            component.sourceData.features[0].geometry.coordinates[0];
        }
        let zMarkLayer = {
          componentsId: component.componentsId,
          visible: true, //是否显示
          zIndex: 12, //层级
          opacity: 1, //透明度
          layerStyle: {
            unit: 'meter', //默认为地理单位，可选值px
            alwaysFront: true, //是否锁定视角
            size: JSON.parse(JSON.stringify(size)), //默认宽高为组件宽高
            rotation: 0, //旋转角度
            //自定义文本内容,后续可以做成自定义配置样式，现在我懒得做了
            content: (index, feat) => {
              var props = feat.properties;
              var leftColor =
                props.styleName == 'blue'
                  ? 'rgba(0, 28, 52, 0.6)'
                  : 'rgba(33,33,33,0.6)';
              var rightColor =
                props.styleName == 'blue'
                  ? '#038684'
                  : 'rgba(172, 137, 51, 0.3)';
              var borderColor =
                props.styleName == 'blue' ? '#038684' : 'rgba(172, 137, 51, 1)';
              return (
                '<div style="width: auto; height: 228px; padding:10px 10px">' +
                '<p style="display: block; font-size:40px;background-image: linear-gradient(to right, ' +
                leftColor +
                ',' +
                leftColor +
                ',' +
                rightColor +
                ',rgba(0,0,0,0.4)); border:4px solid ' +
                borderColor +
                '; color:#fff; border-radius: 15px; text-align:center; margin:0; padding:5px;">' +
                props['name'] +
                ': ' +
                props['key'] +
                '</p><span style="width: 50px; height: 130px; margin: 0 auto; display: block; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/prism_' +
                props.styleName +
                '.png);"></span></div>'
              );
            },
          }, //样式配置
          sourceData: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: coordinates,
                },
                //自定义数据
                properties: {
                  componentsId: component.componentsId, //关联id
                  name: component.sourceData.features[0].properties.name, //文本内容
                  styleName: 'blue',
                  key: 500, //数值内容
                },
              },
            ],
          }, //数据配置
        };
        this.zMarkerLayerComponents.push(zMarkLayer);
      } else {
        //隐藏mark层
        filterComponent[0].visible = status;
      }
    },
    changeOpacity(name) {
      switch (name) {
        case 'decrease':
          this.formData.selectMapComponent.opacity -= 0.1;
          if (this.formData.selectMapComponent.opacity.toFixed(1) < 0.1) {
            this.formData.selectMapComponent.opacity = 0.1;
          }
          break;
        case 'add':
          this.formData.selectMapComponent.opacity += 0.1;
          if (this.formData.selectMapComponent.opacity >= 1) {
            this.formData.selectMapComponent.opacity = 1;
          }
          break;
      }
    },
    changezIndex(name) {
      switch (name) {
        case 'decrease':
          this.formData.selectMapComponent.zIndex--;
          if (this.formData.selectMapComponent.zIndex < 1) {
            this.formData.selectMapComponent.zIndex = 1;
          }
          break;
        case 'add':
          this.formData.selectMapComponent.zIndex++;
          break;
      }
    },
    //改变当前像素,ipnut-number
    changePixel(val, index) {
      const dict = {
        0: 'lng',
        1: 'lat',
      };
      const aMapLocation = pixelSwapToLanLat(val.x, val.y, this.map)[
        dict[index]
      ];
      this[`change${val.type}Pixel`](val, index, aMapLocation);
    },
    //贴图组件像素移动
    changescatterLayerComponentsPixel(val, index, aMapLocation) {
      val.sourceData.features[0].geometry.coordinates[index] = aMapLocation;
    },
    //轨迹线像素移动
    changepulseLineLayoutComponentsPixel(val, index, aMapLocation) {
      // console.log(val, aMapLocation);
      const coordinatesIndex = val.index;
      val.sourceData.features[0].geometry.coordinates[coordinatesIndex][index] =
        aMapLocation;
    },
    changeTabs(key) {
      this.attributeActiveKey.activeTabKey = key;
    },
    showSelectMapLocation(val) {
      this.$emit('showSelectMapLocation', val);
    },
  },
};
</script>
<style lang="less" scoped>
.config {
  .resetLocationIcon:hover {
    cursor: pointer;
  }
  .inputStyle {
    width: 160px;
  }
}
/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 5px !important;
  overflow: auto;
}
.markLayer {
  border: 1px solid red;
  color: blue;
  text-align: center;
}
</style>
